<template>
  <el-container style="height:100%;">
    <el-header>填写数据</el-header>
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="6">
            <el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="name"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-plus" @click="addValue">添加</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column
              v-for="item in tableShowName"
              :key="item.name"
              :prop="item.name"
              :label="item.value"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row[item.name]" clearable></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button
                    size="mini"
                    icon="el-icon-circle-check"
                    @click.stop="() => saveValue(scope)"
                  ></el-button>
                  <el-button size="mini" icon="el-icon-delete" @click.stop="() => delValue(scope)"></el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
            background
          ></el-pagination>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  components: {},
  watch: {
    name(val) {
      this.loadDictValue();
    }
  },
  mounted() {
    this.loadDictValue();
  },
  computed: {
    tableShowName() {
      return this.tableName.filter(item => item.name.indexOf("-name") > 0);
    }
  },
  data() {
    return {
      dictId: this.$route.params.dictId,
      pageSize: 5,
      pageNum: 1,
      total: 0,
      name: null,
      tableData: [],
      tableName: []
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loadDictValue();
    },
    loadDictValue() {
      let _this = this;
      this.axios
        .post(this.HOST + "/value/page", {
          dictId: this.dictId,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          name: this.name
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
            return;
          }
          _this.tableName = res.data.data.names;
          _this.tableData = res.data.data.values.datas;
          _this.total = res.data.data.values.totalCount;
        })
        .catch(function(err) {
          _this.$message.error("操作失败" + err);
        });
    },
    addValue() {
      let item = {};
      this.tableName.forEach(element => {
        item[element.name] = null;
      });
      this.tableData.push(item);
    },
    saveValue(scope) {
      let _this = this;
      let row = scope.row;
      let index = scope.$index;
      if (!row['common-name']) {
        this.$message({
          message: "请输入显示名称",
          type: "warning"
        });
        return;
      }
      this.axios
        .post(this.HOST + "/value/modify", {
            dictId: this.dictId,
            values: JSON.stringify([row])
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
            return;
          }
          _this.loadDictValue();
        })
        .catch(function(err) {
          _this.$message.error("操作失败" + err);
        });
    },
    delValue(scope) {
        debugger;
      let _this = this;
      let row = scope.row;
      let index = scope.$index;
      if (row["common-id"] == null) {
        this.tableData.splice(index, 1);
        return;
      }
      this.axios
        .post(this.HOST + "/value/delete", {
          commonId: row["common-id"]
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
            return;
          }
          _this.loadDictValue();
        })
        .catch(function(err) {
          _this.$message.error("操作失败" + err);
        });
    }
  }
};
</script>
<style scoped>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
</style>
